<template>
  <!--<view class="flex flex-col h-screen">-->

  <view class="payoutsBg h-44 relative flex flex-col">
    <view class="mt-5 text-center text-white text-lg">账户余额</view>
    <view class="text-center text-white text-lg">{{ userInfoData.userInfo.wallet }}</view>

    <view class="flex h-16 mt-auto">
      <view class="flex-1">
        <view class="text-center text-ls text-white">提现中(元)</view>
        <view class="text-center text-lg text-white">{{ statsInfo.pend_price }}</view>
      </view>
      <view class="flex-1">
        <view class="text-center text-ls text-white">历史提现总额(元)</view>
        <view class="text-center text-lg text-white">{{ statsInfo.extract_price }}</view>
      </view>
    </view>
  </view>

  <view class="flex h-10 bg-white">
    <view class="flex-1 text-sm text-slate-600 bg-white h-full flex items-center justify-center" @click="changTab(1)">已提现</view>
    <!--<view :class="tabSelect == 2 ? 'tabAct' : ''" class="flex-1 text-sm text-slate-600 h-full flex items-center justify-center" @click="changTab(2)">已扣除</view>-->
  </view>

  <!--已提现-->
  <List v-if="tabSelect == 1" :dataSource="cashList" @scrollBottom="scrollBottom">
    <template v-slot:mainList="scope">
        <!--<view class="px-4 h-10 text-sm flex items-center bg-gray-100">{{ scope.add_time }}</view>-->
        <view class="px-4 bg-white" @click="jumpDetail(scope.id)">
          <view class="py-2 border-bottom">

            <view class="flex justify-between">
              <!--余额提现-->
              <view class="text-sm">
                {{ scope.extract_type == 'alipay' ? '支付宝' : '银行卡' }}

                <text class="inline-block text-xs px-2 bg-red-600 text-white rounded-2xl" v-if="scope.status == '-1' ">未通过</text>
                <text class="inline-block text-xs px-2 bg-orange-400 text-white rounded-2xl" v-if="scope.status == '0' ">提现中</text>
                <text class="inline-block text-xs px-2 bg-green-400 text-white rounded-2xl" v-if="scope.status == '1' ">已提现</text>
              </view>
              <view class="text-sm">-{{ scope.extract_price }}元</view>
            </view>
            <view class="flex justify-between">
              <view class="text-xs text-zinc-400">手续费: {{ scope.service_fee }}</view>
              <view class="text-xs text-zinc-400">{{ moment(scope.add_time * 1000).format('YYYY/MM/DD HH:mm:ss')  }}</view>
            </view>

          </view>

        </view>
    </template>
  </List>

  <!--已扣除-->
  <List v-if="tabSelect == 99" :screenList="detailList" :dropDownMenuList="detailMenuList">
    <template v-slot:screenTitle>
      <view class="w-4/6 flex items-center">
        <uni-datetime-picker type="daterange" v-model="timeFrame"></uni-datetime-picker>
      </view>
    </template>
    <template v-slot:mainList>
      <view class="px-4 h-10 text-sm flex items-center bg-gray-100">2024-07</view>
        <view class="p-4 bg-white">
          <view class="flex justify-between">
            <view class="text-sm">余额提现</view>
            <view class="text-sm text-green-600">-1599.84元</view>
          </view>
          <view class="flex justify-between">
            <view class="text-xs text-zinc-400">1000005402</view>
            <view class="text-xs text-zinc-400">2024-07-05 09:55:29</view>
          </view>
        </view>
    </template>
  </List>
  <!--</view>-->
</template>

<script setup lang="ts">
  import moment from 'moment'
  import { ref, reactive, onMounted } from 'vue'
  import { withdrawalStatsApi, cashListApi} from '@/api/withdraw'
  import List from './components/list.vue'
  import { userStore } from '@/store/userStore'

  const userInfoData = userStore()
  onMounted(() => {
    getWithData()
    getCashList()
  })
  const pageQuery = ref({
    page: 1,
    limit: 10
  })


  /** 提现统计 **/
  const statsInfo = reactive({
    extract_price: '',
    pend_price: ''
  })
  const getWithData = async () => {
    const res = await withdrawalStatsApi()
    const { extract_price, pend_price } = res.data
    statsInfo.extract_price = extract_price
    statsInfo.pend_price = pend_price
  }

  const cashList = ref<any[]>([])
  const total = ref(0)
  const getCashList = async() => {
    const res = await cashListApi(pageQuery.value)
    cashList.value = [...cashList.value, ...res.data.data]
    total.value = res.data.total
  }

  /** 跳转详情 **/
  const jumpDetail = (id) => {
    uni.navigateTo({ url: '/pages/mine/payoutsDetail?id=' + id })
  }

  /** 滚动到底部 **/
  const scrollBottom = () => {
    if(cashList.value.length < total.value) {
      pageQuery.value.page += 1
      getCashList()
    }

  }

  /** ===================================== **/
  const tabSelect = ref(1)

  const changTab = (type: number) => {
    tabSelect.value = type
  }

  /** 已扣除 **/
  const timeFrame = ref([])
  const detailList = reactive([
    {
      name: '全部',
      key: 'deductType',
      className: 'flex-1 flex items-center justify-end text-slate-600 text-sm',
      type: 'select'
    }
  ])
  const detailMenuList = reactive({
    deductType: [{ menuName: '全部', value: 1 }, { menuName: '系统扣除', value: 2 }, { menuName: '抖音扣除', value: 3 }, { menuName: '快手扣除', value: 4 }]
  })
</script>

<style scoped lang="scss">
.payoutsBg {
  background: url("@/static/image/homeBg.png") no-repeat;
  background-size: cover;
  overflow: hidden;
}
page {
  min-height: 100vh;
  background: #f5f5f5;
}

.tabAct {
  color: #2563eb;
}

</style>
